<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>个人信息</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  <span>全名：{{ person.fullName }}</span>
  <br />
  全名：<input type="text" v-model="person.fullName" />
</template>
  
<script lang="js">
import { ref,reactive, computed,watch} from 'vue';
export default {
    name: 'App',
    setup() {
        //数据
        let person = reactive({
            firstName: "张",
            lastName: "三",
        })
        // 计算属性——简写（没有考虑计算属性被修改的情况）
        /*    person.fullName =  computed(()=>{
               return person.firstName + '' + person.lastName
           }) */
        // 计算属性——完整写法（考虑读写）
        person.fullName = computed({
            get() {
                return person.firstName + ' ' + person.lastName
            },
            set(value) {
                const nameArr = value.split(' ')
                person.firstName = nameArr[0].trim()
                person.lastName = nameArr[1].trim()

            }
        })
        // 返回一个对象
        return {
            person,
        }
    },
}
</script>  